<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <p v-hover.color="['red','black']">自定义指令</p>
        
    </div>


    <script>
        // 全局注册自定义指令
        // Vue.directive("hover",{
        //     inserted:function(el,binding,vnode){
        //         console.log(el);
        //         console.log(binding);
        //         console.log(vnode);
        //         el.onmouseover=function(e){     
        //             el.style.color=binding.value[0];
        //             el.style.textDecoration="underline"
        //         }
        //         el.onmouseleave=function(e){
        //             el.style.color=binding.value[1];
        //             el.style.textDecoration="none"
        //         }
        //     }
        // });
        var app = new Vue({
            el:"#app",
            // 局部注册自定义指令
            directives:{
                "hover":{
                    inserted(el,binding,vnode){
                        el.onmouseover=function(){
                            el.style.color=binding.value[0];
                        };
                        el.onmouseleave=function(){
                            el.style.color=binding.value[1];
                        }
                    }

                }
            }
        })

    </script>
</body>

</html>